.mci-tabs {
  .el-tabs__content {
    overflow: visible;
  }
  .el-tabs__nav-wrap {
    overflow: unset;
    .el-tabs__nav-scroll {
      overflow: unset;
      &::after {
        content: '';
        display: block;
        clear: both;
      }
    }
  }
  &.is-default {
    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__header {
      margin-bottom: 12px;
    }

    .el-tabs__item {
      @include text-14($text-secondary-color);
      // color: var(--color-grey-6);
      height: auto;
      padding: 4px 24px !important;
      box-sizing: border-box;
      border-radius: 16px;
      color: var(--color-black);
      background-color: var(--color-fill-3);
      margin-right: 16px;

      &.is-active {
        color: var(--el-color-primary);
        border: 1px solid #00AC97;
        background-color: #DEFAF5;
      }

      // & + .el-tabs__item {
      //   margin-left: 16px;
      // }
    }

    .el-tabs__active-bar {
      display: none;
    }
  }

  &.is-dark-border,
  &.is-light-border {
    .el-tabs__nav {
      padding: 3px;
      box-sizing: border-box;
      border: 1px solid var(--color-grey-2);
      display: flex;
      border-radius: 4px;
      float: unset;
      .el-tabs__item {
        border-radius: 4px;
        text-align: center;
        flex: 1 1 0;
        & + .el-tabs__item {
          margin-left: 4px;
        }
      }
    }

    .el-tabs__active-bar {
      display: none;
    }

    // 浅色主题
    &.is-light-border {
      .el-tabs__nav-wrap {
        background-color: var(--color-grey-2);

        .el-tabs__item {
          // color: var(--color-grey-5);

          &.is-active {
            // color: var(--color-black);
            // background-color: var(--color-white);
          }
        }
      }
    }
  }

  &.is-normal,
  &.is-normal-theme {
    .el-tabs__nav-wrap {
      &::after {
        height: 0;
      }
    }

    .el-tabs__active-bar {
      display: block;
      background-color: var(--color-grey-9);
    }
    .el-tabs__item {
      // color: var(--color-grey-5);
      margin-left: 0 !important;
      height: 38px;
      font-size: 16px;
      padding: 0 16px;

      &:nth-child(2) {
        padding-left: 0 !important;
      }

      &:hover {
        color: var(--color-grey-9);
      }
      &.is-active {
        color: var(--el-color-primary);
        // background-color: var(--color-white);
      }
    }
  }

  &.is-normal-theme {
    .el-tabs__active-bar {
      display: block;
      background-color: var(--el-color-primary);
    }
  }
}
